import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../views/Home.vue'
// import User from '../views/User.vue'
// import About from '../views/About.vue'

// 使用路由懒加载
const Home=()=>import('../views/Home.vue')
const User=()=>import('../views/User.vue')
const About=()=>import('../views/About.vue')
const HomeNews=()=>import('../components/HomeNews.vue')
const HomeMessage=()=>import('../components/HomeMessage.vue')
const Profile=()=>import('../views/Profile.vue')

// 通过vue.use（插件）安装插件
Vue.use(VueRouter)

const routes = [
  
  {
    // 当路径为空时，重定向到/home
    path: '',
    redirect:'/home'
  },
   {
    path: '/home',
    name: 'home',
    component: Home,
    // meta为元数据，描述数据的数据
    meta:{
      title:"首页"
    },
    
    //子路由
    children:[
      //当子路由为空时，重定向到/home/news
      {path:'',redirect:'news'},
      {path:'news',component:HomeNews},
      {path:'message',component:HomeMessage}
    ]
  },
  {
    path: '/about',
    name: 'about',
    component:About,
    meta:{
      title:"关于"
    }
  },
  {
    path: '/user/:userid',
    name: 'User',
    component: User,
    meta:{
      title:"用户"
    },

    //局部导航守卫
    beforeEnter: (to, from, next) => {
      // ...
      console.log('进入用户页面')
      next()
    }
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta:{
      title:"个人中心"
    }
  },
]

const router = new VueRouter({
  routes,

  //采用history模式，不采用hash模式，避免出现地址栏出现#
  mode:'history',

  //路由被选中的样式
  linkActiveClass:'active'
})

//导航前置全局守卫,from为前一个页面，to为当前页面，next()再进行跳转
router.beforeEach((to,from,next)=>{
  // console.log(from)
  // console.log(to)
  // 从from跳转到to
   document.title=to.matched[0].meta.title
  //必须调用next方法才能跳转
  next()

  // 可以通过next()控制路由跳转，比如说用户如果没有登录，就让他跳转到登录页面
  // if(isLogin==false){
  //   next('/login')
  // }

})

//导航后置全局守卫
router.afterEach((to,from)=>{
  // console.log(to)
})

export default router
